<template>
	<view>
		<view class="content">
			<view class="title">{{article.title}}</view>
			<view class="info">
				<view class="left">
					<image v-if="article.avatar" :src="article.avatar"></image>
					<image v-else :src="article.avatar"></image>
				</view>
				<view class="center">
					<view class="name">{{article.nicheng}}</view>
					<view class="time">{{article.time}}</view>
				</view>
			</view>
			<u-parse v-if="article.content" :content="article.content" ></u-parse>
		</view>
		<view class="bottom" v-if="isShow" @tap="closeButton">
			<view class="buttonView" v-show="stateType == 0">
				<view @tap.stop="collectData">{{ collect }}</view>
				<view @tap.stop="forward">转发</view>
				<view @tap.stop="report">举报</view>
				<view class="cancle">取消</view>
			</view>
			<view class="bottomView" v-show="stateType == 1 || stateType == 2">
				<view @tap.stop="isTopClick(article.is_top)">{{article.is_top == 1 ? '置顶':'取消置顶'}}</view>
				<view @tap.stop="togglePopup('bottom', 'handle')">分享</view>
				<view @tap.stop="editArt">修改</view>
				<view @tap.stop="deleteArt">删除</view>
				<view class="cancle">取消</view>
			</view>
			<view class="bottomView" v-show="stateType == 3">
				<view class="check" v-if="article.is_check == 3" @tap.stop="check">违规查看</view>
				<view class="edit" v-if="article.is_check == 3" @tap.stop="editArt">修改</view>
				<view class="delete" @tap.stop="deleteArt">删除</view>
				<view class="cancle">取消</view>
			</view>
		</view>
		<view class="bottom" v-if="isDelete" @tap="closeButton">
			<view class="deleteView">
				<view class="deleteTitle">删除之后无法恢复，您确定要删除文章？</view>
				<view class="buttons"><text class="btn_cancle">取消</text><text class="btn_yes" @tap="btnYes">确定</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		  components: {
		    uParse
		  },
		data() {
			return {
				article: {},
				isShow: false,
				isDelete: false,
				article_id: '',
				type: ''
			}
		},
		onNavigationBarButtonTap() {
			this.isShow = !this.isShow;
		},
		onShow() {
			this.getDetail();
		},
		onLoad(e) {
			this.article_id = e.article_id;
			this.stateType = e.stateType;
			this.addType = e.addType;
		},
		methods:{
			/* 获取文章详情 */
			getDetail() {
				var data = {}
				var url = '';
				if(this.stateType == 0) {
					url = 'user/article.Lists/articleList'
					data.is_user = 1
					data.article_id = this.article_id
				} else if (this.stateType == 1) {
					url = 'user/newarticle.Lists/articleList'
					data.patriarch_article_id = this.article_id
				} else if (this.stateType == 2) {
					url = 'user/information.Lists/InformationList'
					data.im_id = this.article_id
				} else if (this.stateType == 3) {
					url = 'user/wisdom.Lists/articleList'
					data.is_user = 1
					data.article_id = this.article_id
				}
				this.$zapi.apiPost(url,data).then(res=>{
					if(res.data.code == 200) {
						this.article = res.data.data.data[0];
						this.article.time = util.getBriefTime(this.article.creat_time);
						if(this.article.subhead_creat_time) {
							this.article.ftime = util.getBriefTime(this.article.subhead_creat_time);
						}
						// this.article.content = this.article.content.replace(/&lt;videoSrc=/g, '<video src="');
						// this.article.content = this.article.content.replace(/video&gt;/g,'"autoplay="true" loop="true" show-center-play-btn="true" show-play-btn="false"></video>');
						this.article.content = this.article.content.replace(/><video>/g,
							'"autoplay="true" loop="true" show-center-play-btn="true" show-play-btn="false"></video>');
						this.article.content = this.article.content.replace(/src=/g, 'style="max-width:100%;" src=');
					} else {
						this.article = {}
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 关闭操作弹窗 */
			closeButton() {
				this.isShow = false;
				this.isDelete = false;
			},
			/* 违规查看 */
			check() {
				this.isShow = false;
				uni.navigateTo({
					url: '../complain/be-reported?stateType='+this.stateType+'&addType='+this.addType+'&article_id='+this.article_id
				})
			},
			/* 修改文章 */
			editArt(){
				this.isShow = false;
				uni.navigateTo({
					url: 'article-edit?stateType='+this.stateType+'&addType='+this.addType+'&article_id='+this.article_id
				})
			},
			/* 打开删除文章蒙版 */
			deleteArt() {
				this.isShow = false;
				this.isDelete = !this.isDelete;
			},
			/* 确认删除 */
			btnYes() {
				this.isShow = false;
				this.isDelete = false;
				var data = {}
				var url = '';
				if(this.stateType == 0) {
					url = 'user/article.Users/delArticle'
					data.article_id = this.article_id
				} else if (this.stateType == 1) {
					url = 'user/newarticle.Lists/delArticle'
					data.patriarch_article_id = this.article_id
				} else if (this.stateType == 2) {
					url = 'user/information.Lists/delInformation'
					data.im_id = this.article_id
				} else if (this.stateType == 3) {
					url = 'user/wisdom.Users/delArticle'
					data.article_id = this.article_id
				}
				this.$zapi.apiPost(url,data).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if(res.data.code == 200) {
						if(this.stateType == 0 || this.stateType == 3) {
							uni.navigateBack({
								delta: 2
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.content{
		padding: 30upx;
	}

	.title {
		color: #333333;
		font-size: 38upx;
		line-height: 1.2;
	}

	.info {
		padding: 30upx 0;
		display: flex;
		justify-content: flex-start;
	}

	.left {
		width: 72upx;
		height: 72upx;
		margin-right: 20upx;
	}

	.left image {
		width: 72upx;
		height: 72upx;
		border-radius: 50%;
	}

	.center view {
		line-height: 1.4;
	}

	.name {
		color: #333333;
		font-size: 30upx;
	}

	.time {
		color: #999999;
		font-size: 26upx;
	}

	.cont {
		color: #333333;
		font-size: 32upx;
	}
	/* 底部弹窗 */
	.bottom{
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0,0,0,0.4);
	}
	.bottomView{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #F6F6F6;
		border-radius: 42upx 42upx 0 0;
	}
	.bottomView view{
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 30upx;
		color: #333333;
		background: #FFFFFF;
		border-top: 2upx solid #F6F6F6;
	}
	.bottomView view:first-child{
		border-radius: 40upx 40upx 0 0;
		border: none;
	}
	.cancle{
		margin-top: 20upx;
		border: none;
	}
	.deleteView{
		position: fixed;
		width: 422upx;
		height: 234upx;
		top: calc(50% - 200upx);
		left: calc(50% - 211upx);
		background-color: #FFFFFF;
		border-radius: 20upx;
	}
	.deleteTitle{
		color: #333333;
		font-size: 36upx;
		padding: 30upx;
		line-height: 1.4;
	}
	.buttons{
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
	}
	.btn_cancle{
		color: #999999;
		font-size: 36upx;
	}
	.btn_yes{
		color: #FF9900;
		font-size: 36upx;
	}
</style>
